<template>
    <div class="container">
        <header>
            <h1>{{ pageTitle }}</h1>
            <p>{{ pageSubtitle }}</p>
        </header>

        <SafetySection v-for="section in safetySections" :key="section.id" :title="section.title" :icon="section.icon"
            :tips="section.tips" :visualGuide="section.visualGuide" :flowChart="section.flowChart" />

        <footer>
            <p>{{ footerMessage }}</p>
            <p>© 2025 旅游视界 - 安全旅行指南</p>
        </footer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import SafetySection from './son/index.vue'

// 组件数据
const pageTitle = ref('旅游谨记');
const pageSubtitle = ref('安全旅行，快乐无忧！这些重要提醒，出发前一定要看！');
const footerMessage = ref('旅行是探索，安全是底线——愿你的每一程都满载美好回忆！ ✈️🔒');

const safetySections = ref([
    {
        id: 1,
        title: '人身安全',
        icon: '🔒',
        tips: [
            { icon: '📌', text: '防盗防骗：背包前背，手机握紧，警惕"热心"搭讪（如送手绳、指路骗局）' },
            { icon: '📌', text: '证件安全：重要证件（护照、身份证）与钱包分开存放，备复印件' },
            { icon: '🌙', text: '夜间出行：避免独自走偏僻小巷，提前查好末班车时间' }
        ],
        visualGuide: {
            title: '📌 高风险区域识别',
            content: '在目的地地图中，我们会用<strong style="color: #e74c3c">红色警示图标</strong>标注盗窃高发区，帮助您提前避开危险'
        }
    },
    {
        id: 2,
        title: '健康防护',
        icon: '💊',
        tips: [
            { icon: '💊', text: '常备药品：感冒药、止泻药、创可贴、防晕车药；慢性病患者带足处方药' },
            { icon: '🍜', text: '饮食安全：避免生食、不明来源的水和冰块（热带地区尤其注意）' },
            { icon: '☀️', text: '防晒防暑：高海拔/海边需SPF50+防晒，夏季备藿香正气水' }
        ]
    },
    {
        id: 3,
        title: '应急处理',
        icon: '⚠️',
        flowChart: {
            title: '证件丢失怎么办？',
            steps: [
                '1. 立即向当地警方报案，获取报警记录',
                '2. 联系中国驻当地大使馆/领事馆',
                '3. 准备护照照片和身份证明复印件补办旅行证',
                '4. 通知保险公司（如购买了旅行保险）'
            ]
        }
    },
    {
        id: 4,
        title: '文化尊重',
        icon: '🌍',
        tips: [
            { icon: '🙏', text: '禁忌习俗：寺庙脱鞋、不用左手递物（中东）、不摸小孩头（东南亚）' },
            { icon: '📸', text: '拍照礼仪：拍摄前询问许可（尤其宗教场所、当地居民）' },
            { icon: '♻️', text: '环保责任：减少一次性塑料，不捡拾珊瑚/贝壳（可能违法）' }
        ]
    }
]);
</script>

<style scoped lang="scss">
/* 全局样式 */
:root {
    --primary-color: #4a8fe7;
    --secondary-color: #f5a623;
    --danger-color: #e74c3c;
    --safe-color: #2ecc71;
    --text-color: #333;
    --light-bg: #f9f9f9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
}

/* 页面容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 页眉 */
header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 0;
    background-color: #539ae9;
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }
}
</style>